<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用元素component来动态的挂载不同的组件，使用id特性来选择要挂载的组件</title>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/iview.min.js"></script>
    <link rel="stylesheet" href="../../css/iview.css">
</head>
<body>
<div id="app">
    <component :is="currentView"></component>
    <button @click="handleChangeView('comA')">切换到A</button>
    <button @click="handleChangeView('comB')">切换到B</button>
    <button @click="handleChangeView('comC')">切换到C</button>
</div>
<script>
    var comA = {
        template: "<div>组件A</div>"
    }
    var app = new Vue({
        el: "#app",
        data: {
            currentView: comA
        },
        methods: {
            handleChangeView: function (component) {
                this.currentView = component;
            }
        }
    })
</script>
</body>
</html>